<template>
  <!--视图-->
  <div>

<!--    统计图视图-->
    <el-dialog title="用户部门统计图" :visible.sync="dialogShowFormVisible">
      <div id="main" style="width: 500px;height: 500px"></div>
    </el-dialog>
    <!--    查询条件-->
    <el-form :inline="true" :model="formInlineaa" class="demo-form-inline">
      <el-form-item label="用户名称查询">
        <el-input v-model="formInlineaa.userName" placeholder="用户名称查询"></el-input>
      </el-form-item>
      <el-form-item label="手机号查询">
        <el-input v-model="formInlineaa.phonenumber" placeholder="手机号查询"></el-input>
      </el-form-item>

      <el-form-item label="状态查询">
        <el-select v-model="formInlineaa.status" placeholder="状态查询">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="时间区间查询">
        <el-date-picker
            v-model="valueDate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            end-placeholder="结束日期" @change="changeDate">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
      </el-form-item>
    </el-form>

    <!--按钮-->
    <el-row>
      <el-button type="primary" plain @click="openAdd">添加</el-button>
      <el-button type="success" plain @click="deleteFalse">逻辑删除</el-button>
      <el-button type="info" plain @click="getExcel">导出Excel</el-button>
      <el-button type="warning" plain @click="getTjt">统计图</el-button>
      <el-button type="success" plain @click="downloadTemplate">下载模板</el-button>
      <el-button type="danger" plain @click="getAddExcel">导入Excel</el-button>

    </el-row>

<!--列表-->
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          prop="userId"
          label="用户编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="用户账号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="nickName"
          label="用户昵称">
      </el-table-column>
      <el-table-column
          prop="phonenumber"
          label="手机号码">
      </el-table-column>
      <el-table-column
          prop="avatar"
          label="头像">
        <template v-slot="s">
          <el-image
          style="width: 100px; height: 100px"
          :src="s.row.avatar"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="帐号状态">
        <template v-slot="s">
<!--          {{s.row.status=='0'?value=true:value=false}}-->
          <el-switch
              v-model="s.row.status"
              active-value="0"
              inactive-value="1"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </template>

      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template v-slot="scope">
          <el-button @click="openUpdate(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="byId(scope.row.userId)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
<!--          <el-button @click="byId(scope.row.userId)" type="success"><i class="el-icon-delete"></i></el-button>-->
        </template>
      </el-table-column>
    </el-table>

<!--    分页-->
    <el-pagination
        @current-change="goPage"
        :page-size="5"
        layout="total, prev, pager, next, jumper"
        :total="total">
    </el-pagination>


<!--    添加-->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="用户名称" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" :label-width="formLabelWidth" prop="nickName">
          <el-input v-model="form.nickName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户邮箱" :label-width="formLabelWidth" prop="email">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户手机号" :label-width="formLabelWidth" prop="phonenumber">
          <el-input v-model="form.phonenumber" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户性别" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="form.sex" label="0">男</el-radio>
            <el-radio v-model="form.sex" label="1">女</el-radio>
            <el-radio v-model="form.sex" label="2">未知</el-radio>
          </template>
        </el-form-item>
<!--
        <el-upload
            class="avatar-uploader"
            action="http://192.168.137.234:8888/system/user/addFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
-->
        <el-upload
            class="avatar-uploader"
            action="http://192.168.137.1:8888/system/user/addFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="职位" :label-width="formLabelWidth" prop="postId">
        <el-select v-model="form.id" placeholder="请选择">
          <el-option
              v-for="item in postAll"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setSave('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!--    修改-->
    <el-dialog title="修改用户" :visible.sync="dialogFormVisible1">
      <el-form :model="form1" >

        <el-form-item label="用户名称" :label-width="formLabelWidth" >
          <el-input v-model="form1.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" :label-width="formLabelWidth" >
          <el-input v-model="form1.nickName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户邮箱" :label-width="formLabelWidth" >
          <el-input v-model="form1.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户手机号" :label-width="formLabelWidth" >
          <el-input v-model="form1.phonenumber" autocomplete="off"></el-input>
        </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                  <el-select v-model="form1.status" placeholder="请选择状态">
                    <el-option label="正常" value='0'></el-option>
                    <el-option label="停用" value='1'></el-option>
                  </el-select>
                </el-form-item>
        <el-form-item label="用户性别" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="form1.sex" label="0">男</el-radio>
            <el-radio v-model="form1.sex" label="1">女</el-radio>
            <el-radio v-model="form1.sex" label="2">未知</el-radio>
          </template>
        </el-form-item>

      <!--  <el-upload
            class="avatar-uploader"
            action="http://192.168.137.234:8888/system/user/addFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
-->
        <el-form-item label="密码" :label-width="formLabelWidth" >
          <el-input v-model="form1.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="职位" :label-width="formLabelWidth">
          <el-select v-model="form1.id" placeholder="请选择">
            <el-option
                v-for="item in postAll"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form1.remark"></el-input>
        </el-form-item>
      </el-form>
<!--      <el-form :model="form1">-->
<!--        <el-form-item label="用户名称" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form1.userName" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="用户昵称" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form1.nickName" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="状态" :label-width="formLabelWidth">-->
<!--          <el-select v-model="form1.status" placeholder="请选择状态">-->
<!--            <el-option label="正常" value='0'></el-option>-->
<!--            <el-option label="停用" value='1'></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="用户手机号" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form1.phonenumber" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->

<!--        <el-date-picker-->
<!--            v-model="form1.createTime"-->
<!--            type="datetime"-->
<!--            placeholder="选择日期时间">-->
<!--        </el-date-picker>-->
<!--      </el-form>-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="updateSet">确定修改</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "UserView",
  data() {//属性
    return {
      rules: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 4, message: '名称长度在 2 到 4 个字符', trigger: 'blur' }],
        nickName: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' },
          { min: 3, max: 5, message: '昵称长度在 3 到 5 个字符', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: "email",message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
        phonenumber: [
          { required: true, message: '请输入用户手机号', trigger: 'blur' },
          { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 8, message: '密码长度在 4 到 8 个字符', trigger: 'blur' }],
      },
      multipleSelection: [],
      imageUrl: '',
      value:true,
      value1:[],
      form:{},
      form1:{},
      formLabelWidth:'120px',
      dialogFormVisible1:false,
      dialogFormVisible:false,
      pageNum:1,
      total:0,
      formInlineaa:{},
      tableData:[],
      postAll:[],
      dateAll:['',''],
      dialogShowFormVisible:false,
      valueDate:'',
    }
  }, methods: {//自定义方法
    //打开统计图弹窗
    getTjt() {
      this.dialogShowFormVisible = true;
      this.$nextTick(() => {
        this.zzt();
      })
    },
    //统计图
    zzt() {
      let formData = []
      let value1 = []
      let value2 = []

      const chartDom = document.getElementById('main');
      const myChart = echarts.init(chartDom);

      this.axios.get("system/user/barChart").then(res => {
        formData = res.data;

        value1 = formData.data.map(item => item.xdata);
        value2 = formData.data.map(item => item.ydata);

        const option = {
          xAxis: {
            type: 'category',
            data: value1  // 直接将获取到的角色名称数组赋值给 xAxis 的 data
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: value2,  // 将获取到的数量数组赋值给 series 的 data
              type: 'bar'
            }
          ]
        };
        option && myChart.setOption(option);
      });

      /*
      this.axios.post("system/user/barChart").then(res=>{
        console.log(res);
        this.barChart=res.data.data;
        var y=[];
        var x=[];

        for (let i = 0; i < this.barChart.length; i++) {
          var ydata=this.barChart[i].ydata;
          y.push(ydata)
          var xdata=this.barChart[i].xdata;
          x.push(xdata)
        }
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          xAxis: {type: 'category', data: x},
          yAxis: {type: 'value'}, series: [{
              data: y,
              type: 'line'
            }]};
        option && myChart.setOption(option);
      })
   */
    },
    //下载模版
    downloadTemplate(){
      location.href='http://127.0.0.1:9000/test/%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF.xlsx';
    },
    //获取职位下拉框
    postList() {
      this.axios.post("system/user/postList").then(res => {
        this.postAll = res.data.data;
      })
    },
    //逻辑删除组数赋值
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //多条数据逻辑删除
    deleteFalse() {
      this.axios.post("system/user/deleteFalse", this.multipleSelection).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.list();
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    //上传头像
      handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);

        if(res.code==1001){
          this.form.avatar=res.data;
        }
        console.log(res.url);
        console.log(res.data);
    },


    beforeAvatarUpload() {//file
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;
      //
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;

  },
    //脱敏
    // maskPhoneNumber(phoneNumber) {
    //   return phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(7);
    // },
    //导出Excel
    getExcel(){
      location.href='http://localhost:9017/user/getExcel';
    },
    //根据id删除
    byId(id){
      this.axios.post("system/user/byUserId?id="+id).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    //执行修改
    updateSet(){
      this.axios.post("system/user/updateSet",this.form1).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.dialogFormVisible1=false;
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    //打开修改
    openUpdate(res){
      this.postList();
      this.form1=res;
      this.dialogFormVisible1=true;
    },
    //执行添加
    setSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("system/user/setSave",this.form).then(res=>{
            if(res.data.code==200){
              this.$message.success(res.data.msg);
              this.dialogFormVisible=false;
              this.list();
            }else {
              this.$message.error(res.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //打开添加
    openAdd(){
      this.postList();
      this.form={sex:'0'};
      this.dialogFormVisible=true;
    },
    //分页
    goPage(res){
      this.pageNum=res;
      this.list();
    },
    //change事件时间区间查询
    changeDate(value){
      this.valueDate=value;
      if(this.valueDate!=null){
        this.formInlineaa.indate=this.valueDate[0];
        this.formInlineaa.outdate=this.valueDate[1]
      }else{
        this.formInlineaa.indate=""
        this.formInlineaa.outdate="";
      }
    },
    //列表
    list(){
      this.axios.post("system/user/loginList?pageNum="+this.pageNum,this.formInlineaa).then(res=>{//,this.formInlineaa
        // params:{
        //   userName:this.formInlineaa.userName,
        //       phonenumber:this.formInlineaa.phonenumber,
        //       status:this.formInlineaa.status,
        //       indate:this.formInlineaa.dateAll[0],
        //       outdate:this.formInlineaa.dateAll[1],
        // }

        this.tableData=res.data.data.list;
        this.total=res.data.data.total;
      })
    }
  }, created() { //钩子函数
    this.list();
    //下拉框
    // this.postList();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>